
<template>
    <div>
        <TopBar :title="title"></TopBar>
        <div class="m-login">
            <label>
                <input type="text" v-model="username" placeholder="输入手机号/邮箱">
            </label>

            <label>
                <input type="password" v-model="password" placeholder="输入密码/验证码">
            </label>

            <label>
                <button @click="login" class="cllg">登录</button>
            </label>

        </div>
    </div>
</template>

<script>
    import TopBar from './TopBar.vue';
    import $ from 'jquery';
    export default {
        data: function() {
            return {
                title: '登录',
                username: '',
                password: '',
            }
        },
        methods: {
            login: function() {
                // 做ajax请求
                var url = 'http://localhost:3000/users/login?username=' + this.username + '&pwd=' + this.password;
                $.get(url, function(res) {
                    // console.log(res);
                    if (res && res.code == 0) {
                        // 成功
                    } else {
                        // 失败
                        
                    }
                })
            }
        },
        components:{
            TopBar
        }
    }
</script>

<style>
    .m-login{
        margin-top:.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0px .18rem 0px .18rem;
    }
    .m-login label {
        display: block;
        margin: .3rem 0 0
    }
    .m-login label input{
            border: none;
            background-color: #f6f6f6;
            border-radius: 0rem;
            box-shadow: none;
            outline: none;
            width: 100%;
            height: .24rem;
            padding: .06rem .12rem;
            font-size: .14rem;
            line-height: 1.42857143;
            color: #555;
    }
    .cllg{
        width: 1.63rem;
        background-color: #fe8233;
        color: #fff;
        border: none;
        border-radius: .50em;
        padding: .08rem .12rem;
        font-size: .15rem;
        outline: none;
    }
</style>